<template>
  <div class="">
    <ele-pro-table
      ref="tableRef"
      style="width: 100%"
      :datasource="datasource"
      :pagination="false"
      :columns="columns"
      :tools="false"
      show-summary
      :summary-method="getSummaries"
    >
      <template #toolbar>
        <el-button type="primary" plain @click="openEdit()">添加记录</el-button>
      </template>
      <template #enclosure="{ row }">
        <FileUpload :model-value="encodeFiles(row.enclosure)" readonly />
      </template>

      <template #action="{ row }">
        <el-link type="primary" underline="never" @click="openEdit(row)">
          编辑
        </el-link>
        <el-divider direction="vertical" />
        <el-link type="danger" underline="never" @click="remove(row)">
          删除
        </el-link>
      </template>
    </ele-pro-table>

    <!-- 编辑弹窗 -->
    <PageEdit v-model="showEdit" :data="current" :orderId="orderId" @done="reload" />
  </div>
</template>

<script setup>
import FileUpload from '@/components/FileUpload/index.vue'
import PageEdit from './pay-edit.vue'

const props = defineProps({
  orderId: Number,
})

const tableRef = ref(null)
const current = ref(null)
const showEdit = ref(false)

const { encodeFiles } = utils

/** 表格列配置 */
const columns = ref([
  {
    type: 'index',
    label: '序',
    width: 60,
    align: 'center',
    fixed: 'left',
  },
  {
    prop: 'order_sn',
    label: '单据编号',
    align: 'center',
  },
  {
    prop: 'order_date',
    label: '日期',
    align: 'center',
  },
  {
    prop: 'amount',
    label: '结算金额',
    align: 'center',
  },
  {
    prop: 'enclosure',
    label: '附件',
    align: 'center',
    slot: 'enclosure',
    minWidth: 150,
  },
  {
    prop: 'create_time',
    label: '创建时间',
    formatter: (row) => {
      return utils.formatDate(row.create_time)
    },
    align: 'center',
  },
  {
    columnKey: 'action',
    label: '操作',
    align: 'right',
    slot: 'action',
    fixed: 'right',
    showOverflowTooltip: false,
    width: 140,
  },
])

/** 表格数据源 */
function datasource({ page, limit, where, orders }) {
  return utils.get('/sale/payList', { ...where, ...orders, id: props.orderId, page, limit })
}

/** 搜索 */
function reload(where) {
  tableRef.value?.reload?.({ page: 1, where })
}

/** 打开编辑弹窗 */
function openEdit(row) {
  current.value = row ?? null
  showEdit.value = true
}

function getSummaries({ columns, data }) {
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }
    const keys = ['amount']
    if (keys.includes(column.property)) {
      sums[index] = data.reduce((acc, cur) => utils.Big(acc).plus(cur[column.property]).valueOf(), 0)
    }
    else {
      sums[index] = ''
    }
  })

  return sums
}

/** 删除单个 */
function remove(row) {
  utils.confirm(
    `确定要删除“${row.order_sn}”吗?`,
    '系统提示',
    { type: 'warning', draggable: true },
  )
    .then(() => {
      const loading = utils.message('请求中..', 'loading')
      utils.post('/sale/payDel', { id: row.id })
        .then((res) => {
          utils.message(res.msg, res.success)
          reload()
        })
        .finally(() => loading.close())
    })
    .catch(() => {})
}
</script>

<style lang="scss" scoped>

</style>
